<!--组建战队-->
<template>
    <div class="page_buildGroup">
        <x-header></x-header>
        <main class="Site-content">
            <div class="divi">
                <divider v-if="id=='1'">团队信息</divider>
                <divider v-else>报名信息</divider>
            </div>
            <div class="groppBtns">
                <div class="btn_back">
                    <span>返回</span>
                </div>
                <div class="btn_showInfo btn_rec_normal">完善个人资料</div>
            </div>
            <div class="personalInfo">
                <div class="title" v-if="id=='2'">
                    <div class="date">战队名称</div>
                    <div class="name">{{groupName}}</div>
                </div>
                <x-input v-if="id=='1'" title="战队名称" name="groupName" placeholder="名字不可重复，10字以内"
                         is-type="china-name"
                         :min="2"
                         :max="10"></x-input>
                <x-input v-if="id=='1'" title="领队姓名" name="leaderName" placeholder="请输入领队姓名"
                         is-type="china-name"></x-input>
                <x-input v-else title="姓名" name="leaderName" placeholder="请输入姓名"
                         is-type="china-name"></x-input>
                <x-input title="性别" name="sex" placeholder="请输入您的性别" is-type="china-name"></x-input>
                <x-input title="手机号" name="mobile" placeholder="请输入您的手机号码" keyboard="number"
                         is-type="china-mobile"></x-input>
                <div class="title">
                    <div class="date">出生日期</div>
                    <input type="date" class="aaa" name="user_date"/>
                </div>
                <group class="title">
                    <x-address title="只显示省市" v-model="value4" raw-value :list="addressData"
                               hide-district></x-address>
                </group>
                <div class="title">
                    <div class="date">是否为 无限极持卡人</div>
                    <input type="radio" name="hasCard" class="aaa" v-model="hasCard" :value="true"/>
                    <span class="aaa">是</span>
                    <input type="radio" name="hasCard" class="aaa" v-model="hasCard" :value="false"/>
                    <span class="aaa">否</span>
                    <!--<select v-model="hasCard">-->
                        <!--<option :value="true">是</option>-->
                        <!--<option :value="false">否</option>-->
                    <!--</select>-->
                    <x-input v-if="hasCard==true" class="input_card"   name="leaderName" placeholder="请输入卡号"
                    is-type="china-name"></x-input>
                </div>
            </div>
            <div class="extraInfo" v-if="id=='2'">
                <div class="text">附加信息</div>
                <group>
                    <x-textarea :max="20" placeholder="给领队留言（20字以内）" @on-focus="onEvent('focus')"
                                @on-blur="onEvent('blur')">
                    </x-textarea>
                </group>
            </div>
            <div class="notice">
                <span class="title">注意</span>
                <span class="text">1.请填写你的真实信息</span>
                <span class="text">2.万布荟官网将严格保密你的信息，绝不透露给第三方</span>
                <span class="text">3.每人只能创建或加入一个战队，且活动开始后不可退出。</span>
            </div>
            <div class="btn_group btn_rec_normal">
                <span v-if="id=='1'">组队</span>
                <span v-else>提交申请</span>
            </div>
        </main>
        <x-footer></x-footer>

    </div>
</template>

<script>
    import xHeader from './common/header.vue'
    import xFooter from './common/footer.vue'
    import {Divider,XTextarea, XInput, Group, XAddress, ChinaAddressV4Data, Value2nameFilter as value2name} from 'vux'

    export default {
        name: '',
        components: {
            xHeader,
            xFooter,
            Divider,
            XInput,
            Group,
            XAddress,
            XTextarea,
        },
        data() {
            return {
                addressData: ChinaAddressV4Data,
                value4: ['广东省', '广州市'],
                id: this.$route.params.id,
                groupName: '超能陆战队',
                hasCard:false,
            }
        },
        watch:{

        },
        created() {

        },
        methods: {
            onEvent (event) {
                console.log('on', event)
            }
        },

    }
</script>

<style lang="less" rel="stylesheet/less" type="text/less">
    .page_buildGroup {
        .weui-label {
            color: #2f2f2f;
            width: 7rem;
        }
        .groppBtns {
            height: 3rem;
            padding: 0 1rem;
            /*margin: 1rem;*/
            .btn_back {
                float: left;
                width: 3rem;
                height: 2.5rem;
                line-height: 2.5rem;
                color: #fff;
                background: #4A4A4A;
                border-radius: 50%;
                text-align: center;
                display: inline-block;
            }
            .btn_showInfo {
                float: right;
                width: 8rem;
                height: 2.5rem;
                line-height: 2.5rem;
                background-color: #F7AB00;
                display: inline-block;
            }
        }
        .personalInfo {
            background: #fff;
            padding: 0 1rem;
            .title {
                /*height: auto;*/
                line-height: 2.5rem;
                /*vertical-align: center;*/
                display: block;
                border-bottom: 1px solid #C9C7BB;
                .date {
                    width: 7rem;
                    font-size: .8rem;
                    display: inline-block;
                }
                .aaa {
                    font-size: .8rem;
                    color: #979797;
                }
                .name {
                    display: inline-block;
                    color: #2f2f2f;
                }
                .input_card{
                    display:block;
                    margin-left:7rem;
                    line-height: 4rem;
                    border-top:1px solid #C9C7BB;
                }
            }
            .title:last-child {
                line-height: 2.4rem;
            }
        }
        .weui-cell {
            padding: 0 0;
            height: 2.5rem;
            line-height: 2.5rem;
            border-bottom: 1px solid #C9C7BB;
        }
        .weui-cell__hd {
            color: #2f2f2f;
            width: 7rem;
            font-size: .8rem;
        }
        .vux-popup-picker-select {
            font-size: .8rem;
            text-align: left !important;
        }
        .weui-input {
            font-size: .8rem;
            color: #979797 !important;
        }
        .weui-cells {
            margin: 0 0;
        }
        .vux-cell-value {
            color: #979797;
            font-size: .8rem;
        }
        .notice {
            color: #777;
            padding: 0 1rem;
            span {
                display: block;
            }
            .text {
                text-indent: 2rem;
            }
        }
        .btn_group {
            height: 2.5rem;
            line-height: 2.5rem;
            font-size: .9rem;
            margin: 1rem;
            background-color: #f43952;
        }
        .extraInfo{
            padding:0 .6rem;
            .text{
                padding:1rem 0 .5rem 0;
            }
            .weui-cell__hd {
                color: #2f2f2f;
                width: 1rem;
            }

        }
    }
</style>